<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线编辑</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.common.dev.js"></script>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        .topic {
            height: 40px;
            background-color: gainsboro;
            text-align: center;
            line-height: 40px;
            color: gray;
            width: 100%;
        }

        .text_center{
            text-align: center;
        }

        .main {
            width: 100vw;
            display: flex;
        }

        .editor,
        .tool {
            width: 50%;
            box-sizing: border-box;
            border: 1px solid red;
            box-sizing: border-box;
        }

        .editor_info {
            display: flex;
            margin-top: 30px;
            justify-content: space-around;
        }

        .editor_info span {
            font-size: 14px;
            color: gray;
        }

        .editor_summary {
            text-align: left;
            padding: 20px;
            color: gray;
        }

        .tool_tabs {
            display: flex;
            justify-content: space-around;
        }

        .tool_tabs span {
            width: 33.3%;
            font-size: 18px;
            text-align: center;
            display: block;
            cursor: pointer;
            line-height: 40px;
        }

        .tab_active {
            background-color: hotpink;
            color: white;
        }

        .tool_tab {
            width: 100%;
        }

        .appending_dialog {
            width: 100%;
            height: 500px;
            padding: 100px 0;
            position: fixed;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .appending_diglog_form {
            width: 500px;
            border-radius: 5px;
            margin: auto;
            text-align: center;
            background-color: white;
            padding: 20px;
        }

        .select_type {
            width: 100%;
            display: block;
        }

        .appending_button {
            width: 120px;
            height: 40px;
            margin: 50px 10px auto 10px;
        }
    </style>
</head>

<body>
    <div class="topic">点击模块进行编辑</div>
    <main class="main" id="main">
        <div class="editor" id="editorEle">
            <div v-on:click="open_appending_dialog">
                <svg title="追加" t="1614763446256" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2090" width="64" height="64">
                    <path
                        d="M1024 512C1024 229.226667 794.773333 0 512 0S0 229.226667 0 512s229.226667 512 512 512 512-229.226667 512-512z m-791.274667-46.549333h232.725334V232.725333h93.088v232.725334h232.725333v93.098666H558.538667v232.725334h-93.088V558.549333H232.725333v-93.098666z"
                        fill="#3073F2" p-id="2091"></path>
                </svg>
            </div>
            <div class="editor_hgroup">
                <h1 title="点击编辑标题" id="editor_h1" v-on:click="editH1" class="text_center">{{editor_h1}}</h1>
                <!-- <div class="editor_info">
                    <span title="点击编辑作者">作者：</span>
                    <span title="日期不可编辑">日期：</span>
                </div> -->
            </div>
            <p title="点击编辑摘要" v-on:click="editorSummary" id="editor_summary" class="editor_summary">{{editor_summary}}
            </p>
            <!-- 新曾 -->
        </div>
        <div class="tool">
            <div class="tool_tabs">
                <span v-on:click="changeTab(0)" class="tab_active">参数</span>
                <span v-on:click="changeTab(1)">JSON</span>
                <span v-on:click="changeTab(2)">预览</span>
            </div>
            <div class="tool_container">
                <!-- 参数 -->
                <div>tool_tab_1</div>
                <!-- JSON -->
                <div style="display: none;">
                    {{stringFormJson}}
                </div>
                <!-- 预览 -->
                <div style="display: none;">
                    <h1 id="title" class="text_center"></h1>
                    <div class="editor_info">
                        <span>作者：LXQ</span>
                        <span id="publish_date">日期：2021年3月2日</span>
                    </div>
                    <p id="summary" class="editor_summary"></p>
                </div>
            </div>
        </div>
        <div id="appending_dialog" class="appending_dialog" v-bind:style="{display:editorConfig.isShowingDialog}">
            <div class="appending_diglog_form">
                <h4 class="appending_diglog_title">添加元素</h4>
                <table style="width: 100%;">
                    <tr>
                        <td>元素类型</td>
                        <td>
                            <select name="" id="select_type" class="select_type">
                                <option>段落</option>
                                <option>图片</option>
                                <option>视频</option>
                                <option>音乐</option>
                                <option>超链接</option>
                            </select>
                        </td>
                    </tr>
                </table>
                <button class="appending_button" v-on:click="addElement">添加</button>
                <button class="appending_button" v-on:click="close_appending_dialog">取消</button>
            </div>
        </div>
    </main>
    <script>
        var vm = new Vue({
            el: '#main',
            data: {
                editor_h1: '点击编辑标题',
                editor_summary: '点击编辑摘要',
                editorConfig: {
                    isShowingDialog: 'none',
                    editorEle:document.getElementById('editorEle'),
                    currentEditorEleIndex:0,
                    newEleObjTemplate:{
                        eleId:0,
                        eleType:'p',
                        eleValue:'点击编辑内容',
                        eleCssName:[],
                        eleStyle:{},
                        eleAttrs:{}
                    },
                },
                //elements:[],
                formJson: {
                    title: '',
                    summary: '',
                    publishDate: '',
                    content: []
                },
                stringFormJson: ''
            },
            mounted: function () {
                this.formJson.title = this.editor_h1
                this.formJson.summary = this.editor_summary
                this.formJson.publishDate = this.getCurrectTime()
                this.stringFormJson = JSON.stringify(this.formJson)
            },
            methods: {
                getCurrectTime() {
                    let date = new Date()
                    return date.toLocaleDateString() + ' ' +
                        date.toLocaleTimeString()
                },
                editH1: function () {
                    let titleStr = prompt('编辑标题', document.getElementById('editor_h1').textContent)
                    if (titleStr != '' && titleStr != null) {
                        this.editor_h1 = titleStr
                    }
                },
                changeTab: function (index) {
                    document.querySelectorAll('.tool_tabs span').forEach(innerTab => {
                        innerTab.classList.remove('tab_active')
                    })
                    document.querySelectorAll('.tool_container>div').forEach(tabPage => {
                        tabPage.style.display = 'none'
                    })
                    document.querySelectorAll('.tool_container>div')[index].style = 'block'
                    document.querySelectorAll('.tool_tabs span')[index].classList.add('tab_active')
                },
                editorSummary: function () {
                    let summaryStr = prompt('编辑摘要', document.getElementById('editor_summary').textContent)
                    if (summaryStr != '' && summaryStr != null) {
                        this.editor_summary = summaryStr
                    }
                },
                open_appending_dialog: function () {
                    //document.getElementById('appending_dialog').style.display='block'
                    this.editorConfig.isShowingDialog = 'block'
                },
                close_appending_dialog: function () {
                    //document.getElementById('appending_dialog').style.display='none'
                    this.editorConfig.isShowingDialog = 'none'
                },
                addElement:function(){
                    //this.editorConfig.currentEditorEleIndex++
                    let newEle
                    this.editorConfig.newEleObjTemplate.eleId++
                    let newEleObj=JSON.parse(JSON.stringify(this.editorConfig.newEleObjTemplate))
                    switch(document.getElementById('select_type').value){
                        case '段落':
                            newEleObj.eleType='p'
                            newEle=document.createElement('p')
                            newEle.textContent=newEleObj.eleValue
                        break
                        case '超链接':
                            newEleObj.eleType='a'
                            newEle=document.createElement('a')
                            newEle.setAttribute('href','#')
                            newEle.textContent=newEleObj.eleValue
                        break
                    }
                    document.getElementById('editorEle').appendChild(newEle)
                    this.formJson.content.push(newEleObj)
                    this.editorConfig.isShowingDialog = 'none'
                }
            },
            watch: {
                editor_h1(newVal) {
                    this.formJson.title = newVal
                    formJson()
                    this.formJson.publishDate = this.getCurrectTime()
                    this.stringFormJson = JSON.stringify(this.formJson)
                },
                editor_summary(newVal) {
                    this.formJson.summary = newVal
                    this.formJson.publishDate = this.getCurrectTime()
                    this.stringFormJson = JSON.stringify(this.formJson)
                },
                formJson(){
                    stringFormJson()
                },
                stringFormJson() {
                    let renderData = JSON.parse(this.stringFormJson)
                    document.getElementById('title').textContent = renderData.title
                    document.getElementById('publish_date').textContent = renderData.publishDate
                    document.getElementById('summary').textContent = renderData.summary
                }
            }
        })
    </script>
</body>

</html>